<template>
    <div>
        <span>{{ data.msg }}</span>
        <span>同一事件注册次数:{{ data.events }}</span>
        <span>同一事件处理次数:{{ data.handleCount }}</span>
        <el-button @click="registerEventAndHandle">注册事件及处理器</el-button>
        <el-button @click="publishEvent">发布一个事件</el-button>
        <hr/>
        <el-button @click="reqFun">网络请求</el-button>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import bus from '@/event-bus'
import axiosInstance from '@/axios'

const data = reactive({
    msg: 'HelloVite',
    events: 0,
    handleCount: 0
})

const registerEventAndHandle = () => {
    data.events++
    bus.on('message', (m : string) => {
        console.log('message' + m)
        data.handleCount++
    })
}
const publishEvent = () => {
    bus.publish('message', 'a')
}
const reqFun = () => {
    axiosInstance.get('http://195.185.66.1')
}

</script>

<style scoped>

</style>
